<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>Cocos Creator | RedBlack</title>

  <!--http://www.html5rocks.com/en/mobile/mobifying/-->
  <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true"/>

  <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">

  <!-- force webkit on 360 -->
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- force edge on IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="msapplication-tap-highlight" content="no">

  <!-- force full screen on some browser -->
  <meta name="full-screen" content="yes"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>

  <!--fix fireball/issues/3568 -->
  <!--<meta name="browsermode" content="application">-->
  <meta name="x5-page-mode" content="app">

  <!--<link rel="apple-touch-icon" href=".png" />-->
  <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->

  <style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color:#000000; /* 添加背景图像 */
        background-size: cover;
        background-position: center;
        color: white;
        font-family: Arial, sans-serif;
    }
    .loading-container {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .logo {
        width: 135x;
        margin-bottom: 20px;
    }
    .gif-container {
        width: 279px; /* 设置容器宽度 */
        height: auto; /* 高度自适应 */
        margin-bottom: 25px;
    }
    .resized-gif {
        width: 50%; /* GIF 宽度占满容器 */
        height: auto; /* 高度自适应 */
    }
    .progress-bar {
        width: 279px;
        border: 2px solid #fff;
        border-radius: 10px;
        overflow: hidden;
    }
    .progress-bar-fill {
        height: 10px;
        width:5%;
        background-color: #E1C877;
        transition: width 0.1s ease-in-out;
    }
</style>

  <link rel="stylesheet" type="text/css" href="style.css"/> 

</head>
<body>
  <div id="GameDiv" cc_exact_fit_screen="true">
      <div id="Cocos3dGameContainer">
        <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99"></canvas>
        <div class="loading-container">
            <div class="gif-container">
                <img src="assets/loading.gif" alt="Animated GIF" class="resized-gif">
            </div>

            <div class="progress-bar">
                <div id="progress-bar-fill" class="progress-bar-fill"></div>
            </div>
      </div>
    </div>

    </div>
  
<!-- Polyfills bundle. -->
<script src="src/polyfills.bundle.js" charset="utf-8"> </script>

<!-- SystemJS support. -->
<script src="src/system.bundle.js" charset="utf-8"> </script>

<!-- Import map -->
<script src="src/import-map.json" type="systemjs-importmap" charset="utf-8"> </script>

<script>
    System.import('./index.js').catch(function(err) { console.error(err); })
</script>

</body>
</html>
